<md-dialog id="unis" flex="60">
    <form class="light-theme" novalidate name="form" ng-submit="form.$valid && createOrUpdateAutoGenerationCustomerMaterial()">

        <md-toolbar>
            <div class="md-toolbar-tools">
                <h1>{{title}}</h1>
                <span flex></span>
                <i class="fa fa-times" ng-click="cancel()"></i>
            </div>
        </md-toolbar>

        <md-dialog-content>
            <div class="md-dialog-content" style="min-height: 328px;">
                <div class="grid-parent grid-100 container" style="margin-top:15px;">
                    <div class="grid-25">
                        <label class="label-input">item:</label>
                        <div class="input-icon right" ng-show="form.itemSpec.$invalid && (form.$submitted || form.itemSpec.$touched)">
                            <i class="fa fa-warning tooltips lt-tooltip has-error">
                                <span class="lt-tooltip-text">Required.</span>
                            </i>
                        </div>
                        <!-- <itemspec-auto-complete show-empty-customer-id-item="true" customer-id="customerId" ng-model="param.itemSpecId"
                                name="itemSpec" tags=['Material'] allow-clear="true" required /> -->
                        <itemspec-auto-complete ng-model="param.itemSpecId" name="itemSpec" allow-clear="true" required ng-disabled="isDisabled"/>
                    </div>
                    <div class="grid-25">
                        <label class="label-input">Customer:</label>
                        <div class="input-icon right" ng-show="form.customer.$invalid && (form.$submitted || form.customer.$touched)">
                            <i class="fa fa-warning tooltips lt-tooltip has-error">
                                <span class="lt-tooltip-text">Required.</span>
                            </i>
                        </div>
                        <organization-auto-complete name="customer" ng-model="param.customerId" tag="Customer" required="true" ng-disabled="isDisabled"></organization-auto-complete>
                    </div>
                    <div class="grid-25">
                        <label>Order ID:</label>
                        <input type="text" ng-model="param.orderId" input-auto-fill="DN-" ng-disabled="isDisabled"/>
                    </div>
                    <div class="grid-25">
                        <label>Receipt ID:</label>
                        <input type="text" ng-model="param.receiptId" input-auto-fill="RN-" ng-disabled="isDisabled"/>
                    </div>
                </div>
                <div class="grid-parent grid-100 container" style="margin-top:50px;">
                    <div class="grid-25">
                        <label class="label-input">MaterialType:</label>
                        <div class="input-icon right" ng-show="form.materialType.$invalid && (form.$submitted || form.materialType.$touched)">
                            <i class="fa fa-warning tooltips lt-tooltip has-error">
                                <span class="lt-tooltip-text">Required.</span>
                            </i>
                        </div>
                        <ui-select name="materialType" ng-model="param.materialType" required ng-disabled="isDisabled">
                            <ui-select-match allow-clear="true">
                                {{$select.selected}}
                            </ui-select-match>
                            <ui-select-choices repeat=" materialType in ['Inbound', 'Outbound'] | filter: $select.search">
                                {{materialType}}
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <div class="grid-25">
                        <label class="label-input">MaterialUOM:</label>
                        <div class="input-icon right" ng-show="form.materialUOM.$invalid && (form.$submitted || form.materialUOM.$touched)">
                            <i class="fa fa-warning tooltips lt-tooltip has-error">
                                <span class="lt-tooltip-text">Required.</span>
                            </i>
                        </div>
                        <ui-select name="materialUOM" ng-model="param.materialUOM" required>
                            <ui-select-match allow-clear="true">
                                {{$select.selected}}
                            </ui-select-match>
                            <ui-select-choices repeat=" materialUOM in ['Pallet', 'CS', 'Order', 'Order Item Line', 'EA', 'Tracking Number', 'LP Configuration'] | filter: $select.search">
                                {{materialUOM}}
                            </ui-select-choices>
                        </ui-select>
                    </div>
                    <div class="grid-25">
                        <label class="label-input">Qty:</label>
                        <div class="input-icon right" ng-show="form.qty.$invalid && (form.$submitted || form.qty.$touched)">
                            <i class="fa fa-warning tooltips lt-tooltip has-error">
                                <span class="lt-tooltip-text">Required.</span>
                            </i>
                        </div>
                        <input type="number" name="qty" ng-model="param.qty" style="width: 100%;min-height: 27px;"
                            required>
                    </div>
                </div>
                <div class="grid-parent grid-100 container" style="margin-top:50px;">
                    <div class="form-group" style="color: red;">
                        {{errorMesg}}
                    </div>
                </div>
            </div>
        </md-dialog-content>

        <md-dialog-actions style="padding: 0">
            <div class="grid-100">
                <div class="grid-content">
                    <div class="grid-100 grid-parent container">
                        <div class="grid-60">&nbsp;</div>
                        <div class="grid-20">
                            <unis-waitting-btn btn-type="submit" btn-class="ripplelink" value="submitLabel" is-ready="isReady"
                                is-loading="loading"></unis-waitting-btn>
                        </div>
                        <div class="grid-20">
                            <button type="button" ng-click="cancel()" class="ripplelink">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </md-dialog-actions>

    </form>
</md-dialog>